<template>
  <el-card shadow="never">
    <template #header>
      <el-form label-width="80px">
        <el-row :gutter="24">
          <el-col :span="6" :xs="24">
            <el-form-item label="所属机构">
              <el-select style="width: 100%" v-model="page.institutionId" clearable>
                <el-option v-for="item in institutionList" :key="item.name" :label="item.name"
                           :value="item.institutionId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="订单编号">
              <el-input v-model="page.orderId"/>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="用户姓名">
              <el-input v-model="page.name"/>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="手机号码">
              <el-input v-model="page.phone"/>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="订单状态">
              <el-select style="width: 100%;" v-model="page.status" clearable>
                <el-option v-for="item in orderStatus" :key="item.key" :value="item.key"
                           :label="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="收费阶段">
              <el-select style="width: 100%;" v-model="page.feeStage" clearable>
                <el-option :value="1" label="一推"></el-option>
                <el-option :value="2" label="二推"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="产品名称">
              <el-select style="width: 100%" v-model="page.productId" clearable filterable>
                <el-option v-for="item in productList" :key="item.productId" :label="item.productName"
                           :value="item.productId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="贷超APP">
              <el-select v-model="page.appId" style="width: 100%" clearable>
                <el-option v-for="item in loanProductList" :key="item.appId" :label="item.appName"
                           :value="item.appId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10" :xs="24">
            <el-form-item label="申请时间">
              <el-date-picker
                  style="width: 100%"
                  v-model="page.applyTimeValue"
                  type="daterange"
                  range-separator="~"
                  value-format="x"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="10" :xs="24">
            <el-form-item label="审核时间">
              <el-date-picker
                  style="width: 100%"
                  v-model="page.reviewTimeValue"
                  type="daterange"
                  range-separator="~"
                  value-format="x"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label-width="20px">
              <el-button type="primary" @click="getTableData">查询</el-button>
              <el-button @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <div style="text-align: left;line-height: 32px;margin-bottom: 10px">
    </div>
    <Table :tableColumn="tableColumn" :tableData="tableData" :page="page"
           max-height="600px"
           @handleCurrentChange="(val)=>{page.pageNum = val,getTableData()}"
           @handleSizeChange="(val)=>{page.pageSize = val,getTableData()}"
           :loading="tableLoading"
    >
      <template #termType="{row}">
        <span v-show="row.term">
          {{ row.term }}{{ periodTypeObj[row.termType] }}
        </span>
      </template>
      <template #passTermType="{row}">
        <span v-show="row.passTerm">
          {{ row.passTerm }} {{ periodTypeObj[row.passTermType] }}
        </span>
      </template>
      <template #feeType="{row}">
        {{ row.feeType === 1 ? 'CPA订单量' : 'CPS放款量' }}
      </template>
      <template #feeStage="{row}">
        {{ row.feeStage === 1 ? '一推' : '二推' }}
      </template>
      <template #orderStatus="{row}">
        <span v-html="formatStatus(row.status)"></span>
      </template>
      <template #handle="{row}">
        <!--        <el-button type="text">推送</el-button>-->
        <el-button type="text" v-permiss="['details']" @click="lookDetails(row)">回款详情</el-button>
      </template>
    </Table>

    <Dialog v-model="detailsVisible.isShow" :title="detailsVisible.title"
            @cancel="detailsVisible.isShow = false"
            :footer="false"
            width="65%"
    >
      <el-collapse v-model="detailsCollapse">
        <el-collapse-item title="还款计划" name="1" v-permiss="['details-refundSchedule']">
          <Table border :tableColumn="repaymentPlanColumn" :tableData="repaymentPlanData" :page="false"/>
        </el-collapse-item>
        <el-collapse-item title="还款记录" name="2" v-permiss="['details-repaymentList']">
          <Table border :tableColumn="repaymentRecordColumn" :tableData="repaymentRecordData" :page="false"/>
        </el-collapse-item>
        <el-collapse-item title="展期记录" name="3" v-permiss="['details-rolloverList']">
          <Table border :tableColumn="delayColumn" :tableData="delayData" :page="false"/>
        </el-collapse-item>
      </el-collapse>
    </Dialog>
  </el-card>
</template>

<script>
import {onMounted, reactive, toRefs} from "vue";
import {fetchOrderList, fetchRefundSchedule, fetchRepaymentList, fetchRolloverList} from '@/api/order'
import {selectInstitution, fetchProductSelect, selectProductList} from '@/api/index'
import {dateFormatTimeStamp} from "@/utils";

const tableColumn = [
  {label: '订单编号', prop: 'orderId', align: 'center', fixed: 'left', minWidth: 150},
  {label: '订单状态', prop: 'status', align: 'center', slot: 'orderStatus', minWidth: 100},
  {label: '收费方式', prop: 'feeType', slot: 'feeType', align: 'center', minWidth: 100},
  {label: '收费阶段', prop: 'feeStage', slot: 'feeStage', align: 'center', minWidth: 100},
  {label: '用户姓名', prop: 'name', align: 'center', minWidth: 100},
  {label: '手机号码', prop: 'phone', align: 'center', minWidth: 100},
  {label: '申请时间', prop: 'loanTime', align: 'center', minWidth: 150},
  {label: '申请金额', prop: 'loanAmount', align: 'center', minWidth: 100},
  {label: '申请周期', prop: 'termType', slot: 'termType', align: 'center', minWidth: 100},
  {label: '申请还款期数', prop: 'periods', align: 'center', minWidth: 100},
  {label: '审核时间', prop: 'reviewTime', align: 'center', minWidth: 150},
  {label: '通过金额', prop: 'passAmount', align: 'center', minWidth: 100},
  {label: '通过周期', prop: 'passTermType', slot: 'passTermType', align: 'center', minWidth: 150},
  {label: '通过还款期数', prop: 'passPeriod', align: 'center', minWidth: 150},
  {label: '放款时间', prop: 'paymentTime', align: 'center', minWidth: 150},
  {label: '借款次数', prop: 'loanNumber', align: 'center', minWidth: 100},
  {label: '产品名称', prop: 'productName', align: 'center', minWidth: 150},
  {label: '所属机构', prop: 'institutionName', align: 'center', minWidth: 150},
  {label: '贷超APP', prop: 'appName', align: 'center', minWidth: 100},
  {label: '操作', slot: 'handle', align: 'center', minWidth: 150, fixed: 'right'},
]
const orderStatus = [
  {key: -1, value: '已取消', color: '#5e5e5e'},
  {key: 0, value: '待完成', color: '#1200ff'},
  {key: 1, value: '审核中', color: '#1200ff'},
  {key: 2, value: '拒绝', color: "#6e00cd"},
  {key: 3, value: '待打款', color: "#f579df"},
  {key: 4, value: '待还款', color: "#ffc000"},
  {key: 5, value: '已结清', color: "#06d506"},
  {key: 6, value: '已逾期', color: "#ff0000"},
  // {key: 7, value: '展期', color: "#53aef3"},
  {key: 8, value: '打款失败', color: "#ff0000"},
]
const repaymentPlanColumn = [
  {label: '还款期数', prop: 'seq', align: 'center', minWidth: 100},
  {label: '应还时间', prop: 'refundDate', align: 'center', minWidth: 150},
  {label: '应还金额', prop: 'totalAmount', align: 'center', minWidth: 100},
  {label: '本金', prop: 'principal', align: 'center', minWidth: 100},
  {label: '利息', prop: 'interest', align: 'center', minWidth: 100},
  {label: '罚息', prop: 'overdueFee', align: 'center', minWidth: 100},
  {label: '已还金额', prop: 'alreadyPaid', align: 'center', minWidth: 100},
  {label: '剩余应还金额', prop: 'shouldAmount', align: 'center', minWidth: 100},
]
const repaymentRecordColumn = [
  {label: '还款时间', prop: 'repaymentTime', align: 'center', minWidth: 100},
  {label: '还款金额', prop: 'repaymentAmount', align: 'center', minWidth: 100},
]
const delayColumn = [
  {label: '展期时间', prop: 'rolloverTime', align: 'center', minWidth: 150},
  {label: '展期金额', prop: 'rolloverAmount', align: 'center', minWidth: 100},
  {label: '原还款时间', prop: 'shouldTime', align: 'center', minWidth: 150},
  {label: '展期天数', prop: 'term', align: 'center', minWidth: 100},
  {label: '展期后还款时间', prop: 'expiryTime', align: 'center', minWidth: 150},
  {label: '展期手续费', prop: 'rolloverService', align: 'center', minWidth: 100},
]
const periodTypeObj = {
  1: '天',
  2: '月',
  3: '年'
}
export default {
  name: "OrderList",
  setup() {
    const state = reactive({
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      tableData: [],
      institutionList: [],
      productList: [],
      detailsVisible: {
        isShow: false,
        title: ''
      },
      detailsCollapse: ['1', '2', '3'],
      repaymentPlanData: [],
      repaymentRecordData: [],
      delayData: [],
      tableLoading: false,
      loanProductList: []
    })
    const methods = {
      async getTableData() {
        state.tableLoading = true
        const [loanStartTime, loanEndTime] = dateFormatTimeStamp(state.page.applyTimeValue)
        const [reviewStartTime, reviewEndTime] = dateFormatTimeStamp(state.page.reviewTimeValue)
        const params = {
          ...state.page,
          loanStartTime, loanEndTime,
          reviewStartTime, reviewEndTime
        }
        delete params.applyTimeValue
        delete params.reviewTimeValue
        const res = await fetchOrderList(params)
        if (res.code === 200) {
          const {list, total} = res.data
          state.tableData = list
          state.page.total = total
          state.tableLoading = false
        } else {
          state.tableLoading = false
        }
      },
      resetSearch() {
        state.page = {
          pageNum: 1,
          pageSize: 10,
          total: 0
        }
        methods.getTableData()
      },
      // 获取还款记录明细
      async getRepaymentRecord(orderId) {
        const res = await fetchRepaymentList({
          orderId,
          pageNum: 1,
          pageSize: 1000,
        })
        if (res.code === 200) {
          state.repaymentRecordData = res.data.list
        }
      },
      // 获取还款计划明细
      async getRepaymentPlan(orderId) {
        const res = await fetchRefundSchedule({
          orderId,
          pageNum: 1,
          pageSize: 1000,
        })
        if (res.code === 200) {
          state.repaymentPlanData = res.data.list
        }
      },
      formatStatus(value) {
        const status = orderStatus.find(item => item.key === value)
        if (status) {
          return `<span style="color: ${status.color}">${status.value}</span>`
        } else {
          return value
        }
      },
      // 获取展期明细
      async getDelay(orderId) {
        const res = await fetchRolloverList({
          orderId,
          pageNum: 1,
          pageSize: 1000,
        })
        if (res.code === 200) {
          state.delayData = res.data.list
        }
      },
      lookDetails({orderId}) {
        state.detailsVisible = {
          isShow: true,
          title: orderId + '订单回款明细'
        }
        methods.getRepaymentRecord(orderId)
        methods.getRepaymentPlan(orderId)
        methods.getDelay(orderId)
      },
      getSelect() {
        selectInstitution().then(res => {
          if (res.code === 200) {
            state.institutionList = res.data
          }
        })
        selectProductList().then(res => {
          if (res.code === 200) {
            state.loanProductList = res.data
          }
        })
        fetchProductSelect().then(res => {
          if (res.code === 200) {
            state.productList = res.data
          }
        })
      }
    }
    onMounted(() => {
      methods.getTableData()
      methods.getSelect()
    })
    return {
      repaymentPlanColumn,
      repaymentRecordColumn,
      delayColumn,
      periodTypeObj,
      orderStatus,
      tableColumn,
      ...methods,
      ...toRefs(state)
    }
  }
}
</script>

<style scoped>

</style>
